<template>
  <view class="content">
    <view class="top_box">


      <view class="null"></view>
      <view class="logo">
        <image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/H_logo.png"></image>
        <text class="word">移民白菜价 · 买贵补差价</text>
      </view>
      <view class="mesagebox">
        <view class="search" @click="goSearch">
          <view class="inputbox">
            <!-- <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/msg.png" /> -->

            <up-input placeholder="请输入关键词搜索" placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" readonly
              prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #333333;font-weight: bold;margin-left:15rpx"></up-input>
          </view>
          <!-- <view class="button"> 搜索 </view> -->
        </view>
        <view class="check fs0 message" @click="goMessage">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/msg.png"></image>
          <view class="msg" v-if="token.length > 0 && token.length && userInfo.unread_message_num > 0">{{
            userInfo.unread_message_num > 99 ? '99+' : userInfo.unread_message_num }}</view>
        </view>
        <view class="check fs0" @click="goSign">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/qiandao.png"></image>
          <view class="msg" v-if="token.length > 0 && token.length && signData.is_can_sign === 1">{{ "签到" }}</view>
        </view>
      </view>



      <view class="fenlei">
        <view class="item" @click="goMorePro('移民', '香港')">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon1.png"></image>
          <text class="text">
            {{ "香港身份" }}
          </text>
          <text class="textEng ft-num3">
            Hong Kong Identity
          </text>
        </view>
        <view class="item" @click="goMorePro('移民', '美国')">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon2.png"></image>
          <text class="text">
            {{ "美国身份" }}
          </text>
          <text class="textEng ft-num3">
            US Immigration
          </text>
        </view>
        <view class="item" @click="goMorePro('教育')">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_hai.png"></image>
          <text class="text">
            {{ "海外教育" }}
          </text>
          <text class="textEng ft-num3">
            Overseas Education
          </text>
        </view>
        <view class="item" @click="goPage('/subpackage/search/moreBusiness')">
          <image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          <view>
            <text class="text c-bbq">
              {{ "更多" }}
            </text>
            <text class="textEng ft-num3">
              Business
            </text>
          </view>

        </view>
      </view>
    </view>
    <view class="mesage" @click="goClinch">
      <ScrollNotice_one v-if="fistMsg.length > 0" :notices="fistMsg" direction="horizontal" :duration="20"
        :interval="0" />
    </view>
    <view class="thrid">
      <!-- <view class="right">
        <image class="icon1" src="https://cdn.oss.bon-top.cn/static_bc/images/banner1.png"></image>
        <image class="icon1" src="https://cdn.oss.bon-top.cn/static_bc/images/banner2.png"></image>
      </view>
      <view class="left">
        <image class="icon2" src="https://cdn.oss.bon-top.cn/static_bc/images/banner3.png"></image>
      </view> -->
      <view class="thrid_item" v-for="item in adListData3" :key="item.id">
        <view class="bg"></view>
        <view class="title">
          <view>{{ item.remarkArr[0] || '' }}</view>
          <view> {{ '{' + item.remarkArr[1] + '}' || '' }}</view>
          <view class="eng ft-num3">{{ item.remarkArr[2] || '' }}</view>
        </view>
        <image class="img wh-100" :src="item.img" mode="aspectFill"></image>
      </view>
    </view>

    <view class="activty">
      <view class="fw-900 c-33 title"> 活动优惠 </view>
      <!-- <view class="title_bg ft-eng"> Event discount </view> -->
      <!-- <view class="title_bg ft-eng">
        <view class="left"></view>
        <view class="rigt"></view>
      </view> -->
      <view class="itemGroup">
        <view class="item" @click="goJoinGroup">
          <view class="itemChild flex-center">
            <image class="wh-72" src="https://cdn.oss.bon-top.cn/static_bc/images/c_2.png"></image>
            <!-- <image class="pic" src="https://cdn.oss.bon-top.cn/static_bc/images/c_d.png"></image> -->
          </view>
          <view class="child">
            <text class="word">
              {{ "拼团返现" }}
            </text>
            <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon11.png"></image>
          </view>
        </view>
        <view class="item" @click="goShareLose">
          <view class="itemChild flex-center">
            <image class="wh-72" src="https://cdn.oss.bon-top.cn/static_bc/images/c_1.png"></image>
            <!-- <image class="pic" src="https://cdn.oss.bon-top.cn/static_bc/images/c_d.png"></image> -->
          </view>
          <view class="child">
            <text class="word">
              {{ "分享减免" }}
            </text>
            <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          </view>
        </view>
        <view class="item" @click="goXinPark">
          <view class="itemChild flex-center">
            <image class="wh-72" src="https://cdn.oss.bon-top.cn/static_bc/images/c_3.png"></image>
            <!-- <image class="pic" src="https://cdn.oss.bon-top.cn/static_bc/images/c_d.png"></image> -->
          </view>
          <view class="child">
            <text class="word">
              {{ "新人礼包" }}
            </text>
            <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          </view>
        </view>
        <view class="item" @click="goGetFen">
          <view class="itemChild flex-center">
            <image class="wh-72" src="https://cdn.oss.bon-top.cn/static_bc/images/c_4.png"></image>
            <!-- <image class="pic" src="https://cdn.oss.bon-top.cn/static_bc/images/c_d.png"></image> -->
          </view>
          <view class="child">
            <text class="word">
              {{ "赚积分" }}
            </text>
            <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="vip">
      <image class="bg" src="https://cdn.oss.bon-top.cn/static_bc/images/vipBg.png"></image>
      <view class="left">
        <image class="iocn" src="https://cdn.oss.bon-top.cn/static_bc/images/vipIcon.png"></image>
        <text class="text">
          {{ "会员权益" }}
        </text>
      </view>
      <view class="right" @click="goBuyVip">
        <view class="bg"></view>
        <view class="text">
          <text class="vipLv">
            {{ vipData?.code ?? "VIP0" }}
          </text>
          <text class="desc">{{ vipData?.name ?? "普通用户" }}</text>
        </view>

      </view>
    </view>
    <view class="slider" v-if="bacaiPriceList?.length > 0">
      <!-- <image class="bg" src="https://cdn.oss.bon-top.cn/static_bc/images/bg_1.png"></image> -->
      <view class="text_center fw-900 c-33 pd-20"> 本月白菜价 </view>
      <!-- <view class="title_bg ft-eng"> This month's preferential price </view> -->
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
        <view class="scroll-view-item_H" v-for="item in bacaiPriceList" :key="item.id"
          @click="goProjectDetail(item.id)">

          <view class="time ft-22 flex-bwt">

            <!-- <view class="flex">
              <text class="c-33 fw-800 mr-8">{{ '剩余时间' }}</text>
              <comTimeOut :size="22" :time="item.preferential_end_time"></comTimeOut>
            </view> -->
            <view class="ft flex-center" v-if="item.act_status == 'will_start'">
              <view class="ft-24 fw-800 c-33 mr-4">{{ item.time_str }}</view>
            </view>
            <view class="time ft flex" v-else>
              <view class="ft-24 fw-800 c-33 mr-4">{{ "剩余时间" }}</view>
              <comTimeOut :size="20" :time="item.preferential_end_time"></comTimeOut>
            </view>
            <view class="text c-66 ft-22 mt-10 c-9c">仅剩{{ item.coupon_remain_num }}名</view>
          </view>
          <view class="content1">
            <view class="left fs0">
              <image class="icon" :src="item.cover" mode="aspectFill"></image>
            </view>

            <view class="right">

              <view>
                <view class="tile ft-32 fw-800" :style="{ fontSize: item.name.length > 14 ? '25rpx' : '32rpx' }">
                  <text class="tip ft ft-20" v-for="(tag, index) in item.recommends_show" :key="index"
                    :style="{ marginRight: index == item.recommends_show.length - 1 ? '10rpx' : '4rpx' }">
                    {{ tag }}
                  </text>
                  {{ item.name }}


                </view>
              </view>

              <view class="money  mt-10" style="text-decoration: line-through;">
                <text class="wenzi">{{ item.price_label + item.currency_symbol
                }}
                  <text class="price">{{ item.old_price_show }}</text>
                  {{ item.old_price_unit }}</text>
              </view>
              <view class="flex-bwt">
                <view class="youhui">
                  <text class="wenzi">
                    <text style="color: #FF0000;">
                      {{ item.currency_symbol }}</text>
                    <text class="price ft-36"> {{ item.bc_price_show }}</text>

                    <text style="color: #FF0000;">{{ item.bc_price_unit }}</text>
                    {{ "白菜价券后" }}
                  </text>
                </view>
                <view class="rob">抢</view>
              </view>

            </view>
          </view>
        </view>
      </scroll-view>
      <view style="height:calc(80rpx + 40rpx) ;"></view>
      <view class="button" @click="goPageNav('/subpackage/chineseCabbage/chineseCabbageList')">
        <text class="wenzi">查看更多</text>
        <image class="icon ml-8 mt-2" src="https://cdn.oss.bon-top.cn/static_bc/images/icon11.png"></image>
      </view>
    </view>

    <view class="sign sign_quick" v-if="token.length > 0">
      <view class="top">
        <view class="left">
          <view class="up ml-30">已签到 {{ signData?.keep_sign_day ?? "0" }}天</view>
          <!-- <view class="down ft-eng">Sign in now</view> -->
        </view>
        <view class="right" v-if="signData.is_can_sign === 1" @click="signing">{{ '立即签到' }}</view>
        <view class="right signBtn" v-else @click="goSign">{{ '今日已签' }}</view>
      </view>
      <view class="mildle">
        <view class="left">
          <view class="item" v-for="(item, index) in signData.list" :key="index"
            :class="item.is_sign == 1 ? 'sign_item_active' : ''">
            <image v-if="item.is_sign === 1" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon4.png">
            </image>
            <image v-else class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon5.png"></image>
            <text class="date mt-10">{{ item.name }}</text>
          </view>
        </view>
        <view class="right">
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/jifen.png"></image>
        </view>
      </view>
      <!-- 签到进度条 -->
      <view class="step mt-10 flex-bwt">
        <view class="flex-center" v-for="(item, index) in signData.list" :key="index"
          :style="{ flex: index !== 3 ? 1 : 0 }">
          <!-- <view v-if="index == 3" style="width: 100%;text-align: left;">
            <image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/jiantou.png"></image>
          </view> -->
          <!-- 其他数据正常渲染 -->
          <view class="flex" style="flex: 1;">
            <view class="step_item flex-center fs0" v-if="item.is_sign === 1"><span class="yuan"></span> </view>
            <view class="step_item1" v-else></view>
            <text style="flex: 1;height: 2rpx;background: #333;" v-if="item.is_sign == 1"></text>
            <text style="flex: 1;height: 2rpx;background: #D1D1D1;" v-else></text>
          </view>
        </view>
        <view style="width: 12rpx;text-align: left;">
          <image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/jiantou.png"></image>
        </view>
      </view>
    </view>

    <view class="sign" v-if="videoList.length">
      <view class="top">
        <view class="left">
          <view class="up">项目视频</view>
          <!-- <view class="down ft-eng">Project Video</view> -->
        </view>
        <view class="more" @click="goPage(`/pages/category/category?isReback=${true}`)">
          <text class="text">更多</text>
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
        </view>
      </view>

      <view class="vedio">
        <view class="vedioItem" v-for="item in videoList" :key="item.id"
          @click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
          <image style="border-radius: 40rpx" class="bg wh-100" :src="item.cover" mode="aspectFill"></image>
          <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>


          <view class="card pd-12">
            <view class="bg"></view>
            <view class="ask flex-center">
              <view class="avtor">
                <image class="wh-100" style="border-radius: 50%" :src="item.sale_info.avatar" mode="aspectFill"></image>
                <image class="huiyuan" v-if="item.sale_info?.is_official"
                  src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
              </view>
            </view>
            <view class="desc ml-12">
              <view style="width: 200rpx" class="ft-30 fw-900 ft-lue">
                {{ item.product_info.name }}
              </view>
              <view class="flex ft-lue">
                <text class="ft-22 fs0 mr-12" v-for="tag in item.product_info.tags.slice(0, 2)" :key="tag.id">{{ "#" +
                  tag.name
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pinlun">
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
          <view class="scroll-view-item_A" v-for="item in replysList" :key="item.id">
            <view class="flex pd-8 h-100">
              <image class="wh-40 bd-r50c mr-12 fs0" :src="item.user_info.avatar" mode="aspectFill"></image>
              <text class="ft ft-lue te-1 c-66">
                {{ item.name }}
              </text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="swiper mt-40">
      <up-swiper height="220rpx" v-if="list1.length > 0" :radius="16" :list="list1" keyName="img" circular
        @click="getAdList"></up-swiper>
    </view>
    <view class="sign" style="margin-top: 100rpx;">
      <view class="top">
        <view class="left">
          <view class="up fw-900">直播</view>
          <!-- <view class="down ft-eng">Live broadcast & preview</view> -->
        </view>
        <view class="more">
          <text class="text" @click="goPage('/pages/category/category?type=live&isReback=true')">更多</text>
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
        </view>
      </view>
      <!-- <view class="player auto mt-24">
        <image class="wh-100  bd-r40" src="https://cdn.oss.bon-top.cn/static_bc/images/player.png"></image>
        <view class="open">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/open.png"></image>
          <image class="wh-32 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/icon6.png" mode="aspectFill">
          </image>
          <text class="ft pos1 fw-800" style="color: #ff0000">正在直播</text>
        </view>
      </view> -->
      <scroll-view class="scroll-view_H mt-20" scroll-x="true" scroll-left="0">
        <view class="next flex">
          <view class="one">
            <image class="wh-100  bd-r40" src="https://cdn.oss.bon-top.cn/static_bc/images/xl_bg.png" mode="aspectFill">

            </image>
            <view class="one_bg"></view>
            <view class="title_box">
              <view class="ft-30 c-ff fw-900 ">
                {{ '希腊购房移民' }}
              </view>
              <view class="ft-22 c-ff">
                {{ '欧洲性价比最高“绿卡项目' }}
              </view>
            </view>
            <view class="btn">
              <view class="btn_bg"></view>
              <image class="wh-32 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/icon6.png"></image>
              <text class="ft pos1 c-ff">{{
                "倒计时:2天12时34分"
              }}</text>
            </view>
          </view>
          <view class="one">
            <image class="wh-100  bd-r40" src="https://cdn.oss.bon-top.cn/static_bc/images/mg_bg.png" mode="aspectFill">

            </image>
            <view class="one_bg"></view>
            <view class="title_box">
              <view class="ft-24 c-ff">
                {{ '美国' }}
              </view>
              <view class="ft-16 c-ff">
                {{ 'EB-5投资移民' }}
              </view>
            </view>
            <view class="btn">
              <view class="btn_bg"></view>
              <image class="wh-32 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/icon8.png"></image>
              <text class="ft pos1 c-ff">{{
                "时长：01时34分"
              }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <teacherCard_one></teacherCard_one>
    <view class="sign">
      <view class="top">
        <view class="left">
          <view class="up">热门项目</view>
          <!-- <view class="down ft-eng">Popular Projects </view> -->
        </view>
        <!-- <view class="more" @click="goMorePro">
          <text class="text">更多</text>
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
        </view> -->
      </view>
      <view class="mt-20">
        <comProjectList_one v-if="productList.length > 0" :dataList="productList" :dataObj="productListObj"
          @getProjectList="getProductListData">
        </comProjectList_one>
      </view>

    </view>
    <view style="height: 166rpx"></view>
  </view>
  <up-overlay :show="showOverlay" :opacity="0.3">
    <view class="warp ">
      <view class="rect" @tap.stop>
        <view class="head">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/newplo.png"></image>
        </view>
        <view class="list pd-20">
          <scroll-view class="index-bar" scroll-y>
            <view style="height: 540rpx;">
              <view class="item flex mb-20" v-for="(item, index) in quanList" :key="index">
                <view class="left">
                  <view class="type flex-center c-ff ft ft-20 ">{{ index + 1 + '.' + item.type_name }}</view>
                  <view class="auto flex-center mt-20">
                    <text class="ft ft-22 c-33 ml-8">{{ item.currency_symbol }}</text>
                    <text class="ft-num c-33">{{ item.reduce }}</text>
                  </view>
                </view>
                <view class="right ft c-33 fw-800 pd-20">
                  {{ item.txt }}
                </view>
              </view>
            </view>

          </scroll-view>
          <view class="mt-12">
            <view class="btn ft1 c-dbf flex-center auto" @click="getQuan">
              立即领取
            </view>
            <view class="tips ft-22 flex-center auto c-99">
              <text class="mr-4">今日不在提醒</text>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="payType == 1"
                @click="payType = 0"></image>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png" v-if="payType != 1"
                @click="payType = 1">
              </image>
            </view>
          </view>

        </view>
      </view>
      <view class="close ml-20" @click="closeOverLay">
        <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/closeT.png"></image>
      </view>
    </view>
  </up-overlay>
  <comTabBar :currentIndex="0"></comTabBar>
</template>

<script lang="js" setup>
import { ref, onMounted, reactive } from "vue";
import teacherCard_one from "@/components/teacherCard_one.vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onHide, onLaunch, onLoad, onShow, onUnload } from "@dcloudio/uni-app";

import ScrollNotice_one from "@/components/ScrollNotice_one.vue";
import comTabBar from "@/components/comTabBar.vue";
import comProjectList_one from "@/components/comProjectList_one.vue";
import comTimeOut from '@/components/comTimeOut.vue'

const payType = ref(0)
// 关闭优惠券弹窗
const closeOverLay = () => {
  showOverlay.value = false

  if (payType.value) {
    // 关闭时 判断当前是否选择了今日不再提醒
    // 点击不再提醒
    const date = new Date();
    date.setHours(23, 59, 0, 0);  // 设置时间为今日23:59:00.000
    uni.setStorageSync('dontRemindUntil', date.getTime())
  }
  console.log('点击====>')
}
const shouldShowTime = () => {
  const expireTime = uni.getStorageSync('dontRemindUntil')
  if (!expireTime) return true
  if (Date.now() >= parseInt(expireTime)) {
    uni.removeStorageSync('dontRemindUntil')

    return true
  }
  return false
}
const verticalNotices = ref([
  { id: 1, text: '第一条通知内容' },
  { id: 2, text: '第二条重要通知' },
  { id: 3, text: '第三条最新消息' }
])
const pageInfo = reactive({
  page: 1,
  pageSize: 10
})
const horizontalNotices = ref([
  { id: 1, text: '紧急通知：系统将于今晚24:00进行维护升级，预计耗时2小时' }
])

const handleNoticeClick = (item) => {
  uni.showToast({ title: `点击通知：${item.text}` })
}
const signing = () => {
  utils.request(api.sign, {

  }, 'get').then((res) => {

    if (res.code === 200) {
      getSignData()
      getSignListData()
    }
  })
}
const signIndexData = ref({})
const getSignData = () => {
  utils.request(api.signIndex, {

  }, 'get').then((res) => {

    signIndexData.value = res?.data?.info;
  })
}
const showOverlay = ref(false)
const token = uni.getStorageSync("token");
// 使用 reactive 创建响应式数组
const list1 = ref([]);
const getAdList = (index) => {
  uni.navigateTo({ url: list1.value[index].url })
}
const getAdListData = () => {
  // if (token.length > 0) {
  utils
    .request(
      api.getAdList,
      {
        type: 1,
      },
      "get"
    )
    .then((res) => {
      list1.value = res.data;
    });
  // }

};
const adListData3 = ref([])
const getAdListData3 = () => {
  // if (token.length > 0) {
  utils
    .request(
      api.getAdList,
      {
        type: 3,
      },
      "get"
    )
    .then((res) => {
      adListData3.value = res.data;
      adListData3.value.forEach(f => {
        f.remarkArr = f.remark?.split(',')
      })
      console.log('adListData3', adListData3.value)
    });
  // }

};
const qt = () => {
  wx.openSetting({
    withSubscriptions: true,
    success(res) {
      console.log('xxxxxxxxxxxxxxxxx', res.authSetting)

    }, fail(err) {
      console.log('eeeeeeeeeeeeeeee', err)
    }
  })
}

//领取优惠券
const getQuan = () => {

  console.log('utils.isLogin', utils.isLogin())
  // 未登录不执行订阅 并提示登录
  if (!utils.isLogin()) return utils.showLogModel()


  // if (!isSettings.value) {
  wx.requestSubscribeMessage({
    tmplIds: ['fGFKom9jCfBcu021MgPs0lAEqibuVym4M2iIjmHdfVI', 'brxnvgibMbNbAdkKU-rMnHgJX0KLNX4LSS95E_q_s58'],

    success(res) {
      console.log('res', res)
      // utils.subscribeMessage(res)
    },
    complete(res) {
      getQuanFn()
      utils.subscribeMessage(res)

    }
  })
  // } else {
  //   getQuanFn()

  // }




}
const getQuanFn = () => {
  utils.request(
    api.receiveCoupon,
    {
      is_all: 1,
      is_newcomer: 1
    },
    "post"
  )
    .then((res) => {
      console.log('res', res)
      if (res.code === 200) {
        closeOverLay()
        utils.toast('领取成功')

        // 处理未登录点击领取优惠券
      } else if (res.code == 1001) {
        // utils.modal('温馨提示', '您还没有登录，是否去登录', true, (confirm) => {
        //   if (confirm) {
        //     uni.redirectTo({
        //       url: '/subpackage/login/login',//重定向
        //     })
        //   } else {
        //     uni.navigateBack({
        //       delta: 1,
        //       fail: (res) => {
        //         uni.switchTab({
        //           url: '/pages/index/index',
        //         })
        //       }
        //     })
        //   }
        // })
        uni.redirectTo({
          url: '/subpackage/login/login',//重定向
        })
      }

    })
}
//优惠券列表
const quanList = ref([])

const getQuanList = () => {
  utils
    .request(
      api.getNewcomerCouponList,
      {

      },
      "get"
    )
    .then((res) => {
      if (res.data.un_get === 0) {
        showOverlay.value = false;
      } else {
        console.log('shouldShowTime', shouldShowTime())
        showOverlay.value = shouldShowTime();
        quanList.value = res.data.list;
      }

    });
}


//更多项目
const goMorePro = (name, cName = '') => {
  uni.reLaunch({
    url: `/pages/cart/cart?cate_name=${name}&country_name=${cName}`
  })
}

//更多视频
const goMoreVedio = () => {
  uni.reLaunch({
    url: `/pages/category/category?isReback=${true}`
  })
}

const signData = ref({});
const vipData = ref({});
const getSignListData = () => {
  if (token.length > 0) {
    utils.request(api.getSignData, {}, "get").then((res) => {
      console.log('res===>', res)
      signData.value = res.data.info;
    });
    vipData.value = uni.getStorageSync("userInfo").level_info;
  }
};

const userInfo = ref({})
const getUserData = () => {

  if (token.length > 0) {
    utils.request(api.myCenter, {}, "get").then((res) => {
      //isLogin.value = true;
      if (res.code == 200) {
        userInfo.value = res.data.info;
      }
    });
  }
};

//最近成交
const fistMsg = ref([])
const getDealListData = () => {
  utils.request(api.getDealList, {
    page: 1,
    pageSize: 1
  }, 'get').then((res) => {

    // fistMsg.value.push(res.data.items[0].msg)
    // fistMsg.value = res.data.items.map(f=>f.msg)
    fistMsg.value[0] = '恭喜尊享会员白菜用户***定购美国 EB1A下订成功！'
    fistMsg.value[1] = '喜事临门!!!恭喜尊享会员白菜用户***定购美国 澳大利亚永居下订成功！'


  })
}

//获取本周白菜价列表

const bacaiPriceList = ref([]);
const getProductPreferentialListData = () => {
  utils
    .request(
      api.getProductPreferentialList,
      {
        page: 1,
        pageSize: 10,
        week_type: 1,
        cate_name: "",
      },
      "get"
    )
    .then((res) => {
      bacaiPriceList.value = res.data.items;
      console.log(bacaiPriceList.value, "res>>>>>>>>>>>");
    });
};

//获取视频列表

const videoList = ref([]);
const replysList = ref([]);
const getVideoListData = () => {
  utils
    .request(
      api.getVideoList,
      {
        page: 1,
        pageSize: 2,
        getReply: 1,
      },
      "get"
    )
    .then((res) => {
      videoList.value = res.data.items;
      replysList.value = res.data.replys_list;
    });
};


//获取热门项目列表
const productList = ref([]);
let productListObj = reactive([]);
const getProductListData = () => {
  utils
    .request(
      api.getProductList,
      {
        page: 1,
        pageSize: 5,
        isRecommend: 1,
      },
      "post"
    )
    .then((res) => {
      productListObj = res.data
      productList.value = [...productList.value, ...res.data.items]
    });
};


const goPage = (url) => {
  console.log('hhhhh')
  uni.reLaunch({
    url: url
  })
}
const goClinch = () => {
  uni.navigateTo({
    url: "/subpackage/clinch/clinch",
  });
};
const goPageNav = (url) => {
  uni.navigateTo({
    url: url,
  });
};

//拼团返现
const goJoinGroup = () => {
  uni.navigateTo({
    url: "/subpackage/joinGroup/joinGroup",
  });
}

//分享减免
const goShareLose = () => {
  uni.navigateTo({
    url: "/subpackage/shareReduction/shareReduction",
  });
}

//新人礼包
const goXinPark = () => {
  uni.navigateTo({
    url: "/subpackage/newcomerPack/newcomerPack",
  });
}
//赚积分
const goGetFen = () => {
  uni.navigateTo({
    url: "/subpackage/earnPoints/earnPoints",
  });
}

const goProjectDetail = (id) => {
  uni.navigateTo({
    url: `/subpackage/immigration/immigration?id=${id}`,
  });
};

const goSign = () => {
  if (token.length > 0) {
    uni.navigateTo({
      url: "/subpackage/sign/sign",
    });
  } else {
    uni.navigateTo({
      url: "/subpackage/login/login",
    });
  }
};

const goSearch = () => {
  uni.navigateTo({
    url: "/subpackage/search/search",
  });
};

const goMessage = () => {
  if (token.length > 0) {
    uni.navigateTo({
      url: "/subpackage/message/message",
    });
  } else {
    uni.navigateTo({
      url: "/subpackage/login/login",
    });
  }

};

const goBuyVip = () => {
  uni.navigateTo({
    url: "/subpackage/openVip/openVip",
  });
}

const change = (e) => {
  console.log("change", e);
};

const isSettings = ref(false)
onShow(() => {
  getUserData()
  getSignData()
  getSignListData()
})
onLoad(() => {
  getDealListData();

})
const scroll = () => { };
onMounted(() => {
  getAdListData();
  getAdListData3()
  getSignListData();
  getVideoListData();
  getProductPreferentialListData();
  getProductListData();
  // getDealListData();
  getUserData();
  getQuanList();
  getSignData()
  // wx.getSetting({
  //   withSubscriptions: true,
  //   success(res) {
  //     console.log('onLoad', res)
  //     if (res.subscriptionsSetting.itemSettings) {
  //       // 有优惠券到账 新活动提醒
  //       let temVal = ['brxnvgibMbNbAdkKU-rMnHgJX0KLNX4LSS95E_q_s58', 'fGFKom9jCfBcu021MgPs0lAEqibuVym4M2iIjmHdfVI']
  //       // 用户已经选择过订阅方式 拒绝/允许
  //       isSettings.value = temVal.some(f => res.subscriptionsSetting.itemSettings[f])



  //     }
  //   },
  // })

});


</script>

<style lang="scss" scoped>
.step {
  margin: 0 80rpx;

}

.step_item {
  width: 12rpx;
  height: 12rpx;
  background: #333;
  border-radius: 50%;

  .yuan {
    display: inline-block;
    width: 8rpx;
    height: 8rpx;
    background: #dbf046;
  }

}

.step_item1 {
  width: 12rpx;
  height: 12rpx;
  background: #D1D1D1;
  border-radius: 50%;
}

.signing {
  width: 448rpx;
  height: 78rpx;
  background: #333333;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.signing1 {
  width: 448rpx;
  height: 78rpx;
  background: #F1F1F1;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.warp {
  display: flex;
  align-items: flex-start;
  // justify-content: center;
  height: 100%;
  margin-top: 300rpx;

  .rect {
    width: 518rpx;
    height: 980rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin-left: calc(50% - (518rpx / 2));

    .head {
      width: 518rpx;
      height: 252rpx;
      // background: linear-gradient( , #DBF046 0%, #FEBC60 69%, #FFBA61 100%);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
    }

    .list {
      .item {
        .left {
          width: 182rpx;
          height: 120rpx;
          background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
          border-radius: 20rpx 20rpx 20rpx 20rpx;

          .type {
            width: 126rpx;
            height: 36rpx;
            background: #333333;
            border-radius: 20rpx 8rpx 8rpx 8rpx;
          }
        }

        .right {
          width: 296rpx;
          height: 120rpx;
          background: #F8F8F8;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }
      }

      .btn {
        width: 448rpx;
        height: 78rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .tips {
        margin-top: 12rpx;
      }
    }
  }

  .close {
    width: 44rpx;
    height: 44rpx;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

:deep(.u-steps) {
  flex-wrap: nowrap;
}

.pinlun {
  margin-top: 12rpx;
  width: 100%;
  //border: 2rpx solid red;
}

.project {
  margin: auto;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  width: 650rpx;
  height: 408rpx;
  background: #ffffff;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 2rpx solid #f1f1f1;

  .left {
    width: 222rpx;
    height: 274rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }

  .right {
    flex: 1;
    height: 274rpx;

    .top {
      .tip {
        // width: 88rpx;

        height: 36rpx;
        display: inline-block;
        line-height: 36rpx;
        box-sizing: border-box;
        background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-right: 4rpx;
        padding: 0 4rpx;



      }

      .title {
        margin-left: 6rpx;
      }
    }

    .domn {
      .price {
        // width: 148rpx;
        height: 92rpx;
        background: linear-gradient(90deg,
            #fff5f3 0%,
            rgba(255, 245, 243, 0) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .price2 {
        // width: 148rpx;
        height: 92rpx;
        background: #fff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }


  }

  .foot {
    width: 610rpx;
    height: 74rpx;
    background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
}

.swiper {
  width: 690rpx;
  height: 148rpx;
  // margin-top: 12rpx;
  border-radius: 34rpx 34rpx 34rpx 34rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_A {
  //border: 2rpx solid green;
  display: inline-block;
  max-width: 200rpx;
  height: 60rpx;
  background: #f8f8f8;
  border-radius: 34rpx 34rpx 34rpx 34rpx;
  margin-right: 20rpx;
  padding: 0 10rpx;
}

.scroll-view-item_B {
  //border: 2rpx solid green;
  display: inline-block;
  width: 380rpx;
  height: 398rpx;
  background: #ffffff;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  border: 2rpx solid #f1f1f1;
  margin-right: 20rpx;

  .first {
    box-sizing: border-box;
    // border: #9c0000 solid 2rpx;
    width: 100%;
    height: 110rpx;
    padding: 12rpx;

    .avtor {
      border-radius: 50%;
      width: 72rpx;
      height: 72rpx;
      border: solid 2rpx #dbf046;

      .picture {
        width: 64rpx;
        height: 64rpx;
      }
    }

    .name {}

  }

  .wordpress {
    width: 340rpx;
    height: 176rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    resize: none;
    /* 禁止用户调整 textarea 的大小 */
    word-wrap: break-word;
    /* 确保文本在 textarea 内换行 */
    overflow: auto;
    /* 添加滚动条 */
    padding: 8rpx;
    /* 设置内边距 */
    box-sizing: border-box;
    /* 设置盒子模型 */
  }

  .button {
    width: 170rpx;
    height: 54rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    color: #ffffff;
  }
}

.scroll-view-item_B:first-child {
  margin-left: 20rpx;
}

.scroll-view-item_A:first-child {
  margin-left: 20rpx;
}


.top_box {
  background: linear-gradient(to top, #FFFFFF, #FBFFDF);
  // padding: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
}

.null {
  width: 100%;
  height: 176rpx;
}

.logo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  // background: #fff;
  height: 176rpx;
  box-sizing: border-box;
  padding-top: 88rpx;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  border-bottom: 2rpx solid #f1f1f1;
  // background: linear-gradient(to top, #FFFFFF, #FBFFDF);

  .img {
    width: 140rpx;
    height: 52rpx;
  }

  .word {
    margin-left: 12rpx;
    margin-top: 22rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
  }
}

.mesage {

  margin-top: 40rpx;
  // margin-left: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68rpx;


  .new {
    font-family: 'DIN COROS';
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
  }

  .wenzi {
    margin-left: 12rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
  }

  .icon {
    margin-left: 12rpx;
    width: 24rpx;
    height: 24rpx;
    background: #333333;
    border-radius: 50%;
  }
}

.mesagebox {
  display: flex;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  // background-color: red;


  .message {
    // background: linear-gradient(#dcee4c, #bffab6) !important;
  }

  .check {
    position: relative;
    margin-top: 40rpx;
    margin-left: 20rpx;
    width: 72rpx;
    height: 72rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    background-color: #DBF046;
    display: flex;
    align-items: center;
    justify-content: center;


    .icon {
      width: 32rpx;
      height: 32rpx;
      // margin-top: 18rpx;
      // margin-left: 18rpx;
    }

    .msg {
      position: absolute;
      top: -16rpx;
      right: -16rpx;
      box-sizing: border-box;
      padding-left: 8rpx;
      padding-right: 8rpx;
      height: 28rpx;
      background: #ff0000;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      text-align: center;
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
    }
  }
}

.search {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40rpx;

  .inputbox {
    // width: 574rpx;
    flex: 1;
    height: 72rpx;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 50rpx;
    border: 2rpx solid #333333;
  }

  .button {
    margin-left: 20rpx;
    width: 96rpx;
    height: 80rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}

.fenlei>.item:last-child {
  background-color: #333;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 12rpx;
  box-sizing: border-box;
  flex: 1;

  .text {
    color: #dbf046;
    font-weight: 800;
  }

  .textEng {
    color: #fff;
    font-weight: 800;
  }
}

.fenlei {
  width: 100%;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-evenly;
  padding: 0 30rpx;
  box-sizing: border-box;
  gap: 20rpx;

  .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 180rpx;
    padding: 20rpx 0;
    padding-left: 20rpx;
    background: #f8f8f8;
    border-radius: 20rpx;
    box-sizing: border-box;

    .textEng {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
    }

    .icon {
      width: 64rpx;
      height: 64rpx;
    }

    .text {
      font-weight: 800;
      font-size: 24rpx;
      color: #333333;
      margin-top: 16rpx;
    }
  }
}

.thrid {
  display: flex;
  width: 100%;
  margin-top: 40rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  gap: 20rpx;

  &_item:nth-child(1) .bg {
    background: linear-gradient(to bottom, #343434 20%, rgba(255, 255, 255, 0));
  }

  &_item:nth-child(2) .bg {
    background: linear-gradient(to bottom, #8887e5 20%, rgba(255, 255, 255, 0));
  }

  &_item:nth-child(3) .bg {
    background: linear-gradient(to bottom, #5fa75d 20%, rgba(255, 255, 255, 0));
  }

  &_item {
    flex: 1;
    height: 290rpx;
    border-radius: 40rpx;
    overflow: hidden;
    position: relative;

    .title {
      color: #fff;
      font-size: 26rpx;
      font-weight: 900;
      padding: 20rpx;
      box-sizing: border-box;

      .eng {
        margin-top: 20rpx;
        font-size: 22rpx;
        font-weight: 400;
      }
    }

    .bg,
    .title {
      position: absolute;
      left: 0;
      /* 左边界对齐父盒子 */
      right: 0;
      /* 右边界对齐父盒子 */
      top: 0;
      /* 上边界对齐父盒子 */
      bottom: 0;
      /* 下边界对齐父盒子 */
      z-index: 1;
    }
  }

}

.activty {
  position: relative;
  // margin: auto;
  margin-top: 60rpx;
  width: 100%;
  // height: 308rpx;
  // background: #f8f8f8;
  border-radius: 40rpx;
  padding: 0 30rpx;
  box-sizing: border-box;

  .title_bg {
    z-index: 10;
    text-align: center;
    font-family: 'DIN COROS';
    font-weight: 400;
    font-size: 44rpx;
    color: #333;
    height: 14rpx;
    margin-top: 34rpx;
    // background-color: #8236DE;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 30rpx;
    width: 160rpx;
    display: flex;
    justify-content: space-between;


    .left {
      height: 100%;
      flex: 1;
      background-color: #D5FE42;
      // border-radius: 10rpx 0 10rpx 0;
      transform: skewX(-35deg);

    }

    .rigt {
      height: 100%;
      width: 12rpx;
      margin-left: 10rpx;
      background-color: #ad69ff;
      transform: skewX(-35deg);
      // border-radius: 4rpx 0 4rpx 0;
    }
  }

  .title {
    position: relative;
    top: 0rpx;
    left: 0rpx;
    font-weight: 800;
    font-size: 32rpx;
    height: 44rpx;
    line-height: 44rpx;
    color: #333333;
    text-align: left;
    z-index: 3;
    // line-height: 0rpx;
  }

  .itemGroup>.item:nth-child(1) {
    background: linear-gradient(90deg, #DBF046 0%, #FFBA61 100%);
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // flex-direction: column;

    .itemChild {
      background: none;
      margin-top: 10rpx;
    }

    .child {
      background: #333;

      .word {

        color: #fff;
      }
    }
  }

  .itemGroup {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 20rpx;
    gap: 20rpx;


    .item {
      width: 100%;
      background: #f8f8f8;
      border-radius: 20rpx;
      padding: 15rpx 10rpx 10rpx;
      box-sizing: border-box;
      overflow: hidden;

      .itemChild {
        width: 100%;
        height: 72rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        margin-top: 10rpx;
        box-sizing: border-box;

        .pic {
          width: 22rpx;
          height: 38rpx;
          top: -30rpx;
          left: 63rpx;
        }
      }



      .child {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52rpx;
        border-radius: 20rpx;
        margin-top: 20rpx;
        background: #ffffff;

        .word {
          margin-left: 5rpx;
          margin-right: 5rpx;
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
        }

        .icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}

.vip {
  position: relative;
  margin: auto;
  margin-top: 60rpx;
  width: 690rpx;
  height: 120rpx;
  background: #000;
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .left,
  .right {
    position: absolute;
    top: 50%;
    /* 上下居中 */
    transform: translateY(-50%);
    /* 上下居中 */
    z-index: 2;
    /* 确保在背景图上方 */
  }

  .left {
    left: 20rpx;
    /* 水平偏左 */
    display: flex;
    align-items: center;

    .iocn {
      width: 42rpx;
      height: 36rpx;
    }

    .text {
      margin-left: 12rpx;
      font-weight: 800;
      font-size: 36rpx;
      color: #ffffff;
    }
  }

  .right {
    width: 190rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: #6a7139;
    //opacity: 0.6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    right: 20rpx;
    position: absolute;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba($color: #fff, $alpha: 0.4);
      border-radius: 20rpx;

    }

    /* 水平偏右 */
    .vipLv {
      font-family: 'DIN COROS';
      font-weight: 400;
      font-size: 26rpx;
      color: #daf605;
      margin-right: 10rpx;
    }

    .desc {
      margin-left: 4rpx;
      font-weight: 800;
      font-size: 24rpx;
      color: #ffffff;
    }
  }
}

.slider {
  position: relative;
  margin: auto;
  margin-top: 60rpx;
  width: 690rpx;
  min-height: 506rpx;
  border-radius: 40rpx;
  background: linear-gradient(#DBF046 0%, #FFBA61 100%);

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -11;
    transform: rotate(180deg);
  }

  .title_bg {
    z-index: -1;
    text-align: center;
    line-height: 100rpx;
    font-family: 'DIN COROS';
    font-weight: 400;
    font-size: 44rpx;

    color: #ffffff;
    opacity: 0.6;
    height: 44rpx;
    line-height: 44rpx;
    margin-top: 34rpx;
  }

  .title {
    z-index: 5;
    position: absolute;
    left: 260rpx;
    font-weight: 800;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    line-height: 80rpx;
    top: 20rpx;
    height: 44rpx;
    line-height: 44rpx;
  }

  //////////////////////////////////

  .scroll-view-item_H {
    display: inline-block;
    width: 568rpx;
    min-height: 326rpx;
    // min-height: 308rpx;
    background: #ffffff;
    margin-right: 20rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin-top: 6rpx;
    box-sizing: border-box;
    padding-bottom: 20rpx;

    .time {
      margin: auto;
      padding: 10rpx;
      width: 568rpx;
      text-align: center;
      font-weight: 400;
      font-size: 22rpx;
      color: #9c0000;
      box-sizing: border-box;
      // background: linear-gradient(180deg,
      //     #fff5f3 0%,
      //     rgba(255, 245, 243, 0) 100%);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }

    .text {
      background: #f8f4eb;
      border-radius: 20rpx;
      padding: 10rpx 16rpx;
    }

    .content1 {
      // margin-top: 10rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      // background-color: red;
      overflow: hidden;

      .left {
        width: 177rpx;
        height: 216rpx;
        border-radius: 20rpx;
        margin-right: 20rpx;
        margin-left: 20rpx;
        overflow: hidden;

        .icon {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        //border: #9C0000 solid 2rpx;
        flex: 1;
        box-sizing: border-box;
        padding-right: 20rpx;
        flex-basis: auto;

        .tile {
          flex: 1;
          margin-top: 12rpx;
          font-weight: 800;
          color: #333333;
          white-space: normal;
          line-height: 40rpx;
          /* 覆盖可能的nowrap设置 */

          .tip {
            display: inline-block;
            height: 36rpx;
            line-height: 36rpx;
            box-sizing: border-box;
            background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-right: 4rpx;
            padding: 0 6rpx;
            position: relative;
            top: -5rpx;


          }
        }

        .money {
          // margin-top: 42rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #999999;

          .price {
            font-family: 'DIN COROS';
            font-weight: 400;
            font-size: 32rpx;
            color: #999999;
          }
        }

        .rob {
          width: 70rpx;
          height: 80rpx;
          background: linear-gradient(90deg, #DBF046 0%, #FFBA61 100%);
          border-radius: 20rpx;
          text-align: center;
          line-height: 80rpx;
          color: #333;
          margin-left: 20rpx;
        }

        .youhui {
          margin-top: 12rpx;
          width: 198rpx;
          height: 52rpx;
          background: #fff5f3;
          border-radius: 46rpx 46rpx 46rpx 46rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          text-align: center;
          line-height: 52rpx;

          .price {
            font-family: 'DIN COROS';
            font-weight: 400;
            font-size: 36rpx;
            color: #ff0000;
          }
        }
      }
    }
  }

  .ask {
    display: inline-block;
    width: 200rpx;
    height: 60rpx;
    background: #f8f8f8;
    border-radius: 34rpx 34rpx 34rpx 34rpx;

    .avtor {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
    }
  }

  .scroll-view-item_H:first-child {
    margin-left: 20rpx;
  }

  ///////////////////////////////////
  .button {
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40rpx);
    height: 74rpx;
    background: #333333;
    border-radius: 20rpx;
    border: 2rpx solid #e2e64b;

    .wenzi {
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }

    .icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

:deep(.project) {
  background: #f1f1f1 !important;
}

.sign_quick {
  background: linear-gradient(180deg, #FBFFDF 0%, #f8f8f8 100%);
}

.sign {
  // margin-top: 46rpx;
  margin: 46rpx auto 0;
  box-sizing: border-box;
  width: calc(100% - 60rpx);
  min-height: 252rpx;
  // background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
  border-radius: 40rpx 40rpx 40rpx 40rpx;



  .top {
    margin-top: 20rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
      position: relative;
      flex: 1;
      height: 44rpx;

      .up {
        width: 100%;
        height: 44rpx;
        font-weight: 800;
        line-height: 44rpx;
        font-size: 32rpx;
        color: #333333;
        position: absolute;
        top: 0;
        left: 0rpx;
        z-index: 9;
      }

      .down {
        width: 100%;
        height: 44rpx;
        position: absolute;
        top: 14rpx;
        left: 20rpx;
        font-family: 'DIN COROS';
        font-weight: 400;
        font-size: 44rpx;
        line-height: 44rpx;
        color: #dbf046;
        opacity: 0.8;
        z-index: 2;
        opacity: 0.6;

      }
    }


    .right {
      width: 176rpx;
      height: 54rpx;
      background: #333333;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #dbf046;
      text-align: center;
      line-height: 54rpx;
      margin-right: 20rpx;
    }

    .signBtn {
      background: #F1F1F1;
      color: #999;
    }

    .more {
      width: 122rpx;
      margin-right: 20rpx;
      height: 54rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #333333;

      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        margin-right: 8rpx;
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .mildle {
    width: 100%;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      flex: 1;
      display: flex;
      margin-left: 30rpx;
      justify-content: space-between;
      align-items: center;
      margin-right: 22rpx;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 106rpx; //去除左右边框宽度
        height: 116rpx;
        background: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 2rpx solid #f1f1f1;

        .icon {
          width: 32rpx;
          height: 32rpx;
        }

        .date {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }
      }

      .sign_item_active {
        background: #fbffdf;
        border: 2rpx solid #333333;

      }
    }

    .right {
      margin-right: 20rpx;
      width: 252rpx;
      height: 130rpx;
      // background: #dbf046;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .icon {
        width: 100%;
        height: 100%;
      }
    }
  }

  .vedio {
    display: flex;
    padding-top: 10rpx;
    gap: 30rpx;
    overflow: hidden;

    .vedioItem {
      width: 100%;
      height: 598rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      //border: 1rpx solid red;
      margin-bottom: 16rpx;
      position: relative;
      overflow: hidden;

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .play {
        position: absolute;
        top: 297rpx;
        left: 147rpx;
        z-index: 3;
      }

      .ask {
        width: 66rpx;
        height: 66rpx;
        background: #b9bbae;
        border-radius: 50%;
        // position: absolute;
        box-sizing: border-box;
        // top: 0;
        // left: 20rpx;

        .avtor {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
          position: relative;
        }
      }

      .card {
        width: 100%;
        height: 182rpx;
        // background: #ffffff;
        // border-radius: 44rpx;
        position: absolute;
        bottom: 00rpx;
        left: 0rpx;
        z-index: 10;
        overflow: hidden;
        color: #fff;


        // opacity: 0.7;
        .bg {
          width: 314rpx;
          height: 182rpx;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          // background: #fff;
          background: linear-gradient(to top, #000000, #000000 0%, rgba(0, 0, 0, 0) 50%);
          filter: blur(30rpx);
        }

        .huiyuan {
          width: 22rpx;
          height: 20rpx;
          position: absolute;
          bottom: -5rpx;
          left: 40rpx;
          z-index: 12;
        }
      }
    }
  }

  .player {
    position: relative;
    width: 650rpx;
    height: 370rpx;
    background: #dbf046;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .open {
      position: absolute;
      top: 22rpx;
      left: 32rpx;
      width: 158rpx;
      height: 48rpx;
      background: #fff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      //border: 2rpx solid #333333;
      // opacity: 0.8;

      .pos {
        position: absolute;
        top: 8rpx;
        left: 10rpx;
      }

      .pos1 {
        position: absolute;
        top: 8rpx;
        left: 52rpx;
      }
    }
  }

  .next {
    .one:last-child .one_bg {
      // background: linear-gradient(90deg,
      //     #1746ff 0%,
      //     #1746ff 34%,
      //     rgba(23, 70, 255, 0) 100%);
      // background: linear-gradient( 90deg, #1746FF 0%, #1746FF 14%, rgba(23,70,255,0) 100%);
      background: linear-gradient(90deg, #1746FF 5%, rgba(23, 70, 255, 0.8) 60%, rgba(23, 70, 255, 0) 100%);
    }

    .one {
      flex-shrink: 0;
      position: relative;
      width: 450rpx;
      height: 268rpx;
      overflow: hidden;
      border-radius: 40rpx;
      margin-right: 20rpx;

      .one_bg {
        background: linear-gradient(48deg, #F87A20 5%, rgba(248, 122, 32, 0.80) 50%, rgba(248, 122, 32, 0) 100%);

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .title_box {
        position: absolute;
        top: 168rpx;
        left: 50rpx;
        width: 100%;
        height: 100%;
      }


      .btn {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        width: 276rpx;
        height: 52rpx;
        // background: #ffffff;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        overflow: hidden;

        // opacity: 0.6;
        .btn_bg {
          width: 100%;
          height: 100%;
          background-color: #fff;
          filter: blur(30rpx);
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0.9;

        }


        .pos {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
        }

        .pos1 {
          position: absolute;
          top: 10rpx;
          left: 52rpx;
        }
      }
    }
  }
}
</style>
